<template>
  <div class="widgetPanel">
    <div class="widgetPanel__top">组件库</div>
    <vue-draggable-next
      :list="list"
      item-key="key"
      :group="{ name: 'dragGroup', pull: 'clone', put: false }"
      :sort="false"
      class="widgetPanel__content"
    >
      <div
        v-for="(fld, index) in list"
        class="widgetPanel__content-item"
        :title="fld.name"
        :key="index"
      >
        <span class="fieldWidget__item-customize-title">
          {{ fld.name }}
        </span>
      </div>
    </vue-draggable-next>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { VueDraggableNext } from "vue-draggable-next";
import { basicFields } from "./widgetsConfig";

const list = ref<any[]>(basicFields);
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
